{% extends 'website/src/base.html' %}
{% block style %}
    <!-- 为model form中的label添加特定样式 -->
    <style>
        /* 直接选择所有label元素并添加样式 */
        label { color: #8c8c80; font-size: 17px; }
        {#label[for="toAdmin_id"],label[for="toPlat_id"],label[for="toExample_id"], label[for="toProduct_id"]] {display: none}  /*, label[for="toProductFuc_id" */#}
        {##toAdmin_id, #toPlat_id, #toExample_id, #toProduct_id {display: none} /*<!-- 隐藏关联选择框 -->,#toProductFuc_id*/#}
        label[for="toAdmin_id"],#toAdmin_id {display: none}
         {# 枚举类输入框 #}
        .enumInputClass:focus {
          border: 1px solid #2c2d2f;
        }
    </style>

{% endblock %}
{% block main %}
<div class="row m-3 container-fluid " style="border-radius: 10px; border: 1px solid #313438; background-color: #2c2d2f">
    <!-- 1.设置平台  -->
    <div class="panel panel-body col-md-3" style="border-radius: 10px;  border: 1px solid #313438;">
        <div class="panel-heading text-white text-center mt-1 mb-1">第1步：设置平台</div>
        <div class="panel-body ps-3 pe-3">
            <label class="text-gray">选择平台</label>
            <form id="editForm_plat" class="form-horizontal" method="post" novalidate>
                {% csrf_token %}
                <!-- 检查此用户使用了几个平台  -->
                <select id="mySelectPlat" class="form-select form-select-sm ps-2 pt-1"
                        aria-label=".form-select-sm example"
                        style="height: 40px; background-color: #1e1f22; color: white; border: 1px solid grey;"
                        onchange="changed('mySelectPlat',1)">
                    <option selected style="background-color: #2c2d2f;" value="0">请选择或新增</option>
                    {% for pl in admin_plat %}
                        <option style="background-color: #2c2d2f" value="{{ pl.id }}">{{ pl.name }}</option>
                    {% endfor %}
                </select>
                <label class="mt-2 text-danger add_chang1">新增↓</label>
                {{ form_plat }}

                <!-- 保存删除  -->
                <div class="panel-footer text-center mt-3">
{#                    <button type="submit" class="btn btn-outline-success border-1 border-info me-4 p-2" id="SubmitBtn1" onclick="saveAction(1)">存平台</button>#}
                    <button type="button" class="btn btn-outline-danger border-1 border-light p-2 w-100" data-bs-toggle="modal" onclick="deleteAddAction('deleteModal',1)">删此平台</button>
                </div>
                <p id="edit1" class="mt-2 text-danger text-center fs-6"></p>

            </form>
        </div>
    </div>
    <!-- 2.设置实例  -->
    <div class="panel panel-body col-md-3" style="border-radius: 10px;  border: 1px solid #313438;">
        <div class="panel-heading text-white text-center mt-1">第2步：设置实例</div>
        <div class="panel-body ps-3 pe-3">
            <label class="text-gray">选择实例</label>
            <form id="editForm_example" class="form-horizontal" method="post" novalidate>
                {% csrf_token %}
                <!-- 检查此用户使用了几个实例  -->
                <select id="mySelectExample" class="form-select form-select-sm ps-2 pt-1"
                        aria-label=".form-select-sm example"
                        style="height: 40px; background-color: #1e1f22; color: white; border: 1px solid grey;"
                        onchange="changed('mySelectExample',3)">
                    <!--0代表检索平台名称, 1平台选择项检索 2检索实例名称  3实例选择项检索  -->
                    <option selected style="background-color: #2c2d2f;" value="0">请选择或新增</option>
                    {# 以下几句被js顶替了 #}
                    {# {% for pl in plat_example %}#}
                    {# <option style="background-color: #2c2d2f" value="{{ pl.pk }}">{{ pl.iotInstanceId }}</option>#}
                    {# {% endfor %}#}
                </select>

                <label class="mt-2 text-danger add_chang3">新增↓</label>
                {{ form_example }}
                <!-- 保存删除  -->
                <div class="panel-footer text-center mt-3">
{#                    <button type="submit" class="btn btn-outline-success border-1 border-info me-4 p-2" id="SubmitBtn2" onclick="saveAction(2)">存实例</button>#}
                    <button type="button" class="btn btn-outline-danger border-1 border-light p-2 w-100" data-bs-toggle="modal" onclick="deleteAddAction('deleteModal',2)">删此实例</button>
                </div>
                <p id="edit2" class="mt-2 text-danger text-center fs-6"></p>
            </form>
        </div>
    </div>
    <!-- 3.设置产品和功能定义  -->
    <div class="panel panel-body col-md-3" style="border-radius: 10px;  border: 1px solid #313438;">
        <div class="panel-heading text-white text-center mt-1">第3步：设置产品</div>
        <div class="panel-body ps-3 pe-3">
            <label class="text-gray">选择产品</label>
            <form id="editForm_product" class="form-horizontal" method="post" novalidate>
                {% csrf_token %}
                <!-- 检查此产品使用了几个设备  -->
                <select id="mySelectProduct" class="form-select form-select-sm ps-2 pt-1"
                        aria-label=".form-select-sm example"
                        style="height: 40px; background-color: #1e1f22; color: white; border: 1px solid grey;"
                        onchange="changed('mySelectProduct',5)">
                    <!--0代表检索平台名称, 1平台选择项检索 2检索实例名称  3实例选择项检索  -->
                    <option selected style="background-color: #2c2d2f;" value="0">请选择或新增</option>
                    {# 以下几句被js顶替了 #}
                </select>
                <label class="mt-2 text-danger add_chang5">新增↓</label>
                {{ form_product }}

                <label class="mt-1 text-gray add_chang9 row ms-1">功能定义</label>
                <table class="table table-bordered table-sm" id="myTable">
                    <thead>
                    <tr>
                        <th scope="col" class="col-md-4" style="background: #2c2d2f; color: grey;; padding: 0.5rem 0rem 0.5rem 0.5rem; font-size: 0.8rem">名称</th>
                        <th scope="col" class="col-md-5" style="background: #2c2d2f; color: grey;; padding: 0.5rem 0rem 0.5rem 0.5rem; font-size: 0.8rem">标识符</th>
                        <th scope="col" class="col-md-3 text-center" style="background: #2c2d2f; color: grey;; padding: 0.5rem 0; font-size: 0.8rem">操作
                        <a class="btn btn-outline-success btn-sm" href="#" style="padding: 0.1rem;" data-toggle="modal" data-target="#myModal" onclick="changed('editForm_fun',12)">新增</a>  <!--7先检查前面是否录入齐全 deleteAddAction('myModal',0) -->
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                       {# {{ form_fun }} 功能定义明细 由js代替了 #}
                    </tbody>
                </table>
                <!-- 保存删除  -->
                <div class="panel-footer text-center mt-3">
{#                    <button type="submit" class="btn btn-outline-success border-1 border-info me-4 p-2" id="SubmitBtn3" onclick="saveAction(3)">存产品</button>#}
                    <button type="button" class="btn btn-outline-danger border-1 border-light p-2 w-100" data-bs-toggle="modal" onclick="deleteAddAction('deleteModal',3)">删此产品</button>
                </div>
                <p id="edit3" class="mt-2 text-danger text-center fs-6"></p>
                <p id="edit5" class="mt-2 text-danger text-center fs-6"></p>
            </form>
        </div>
    </div>
    <!-- 4.设置设备  -->
    <div class="panel panel-body col-md-3" style="border-radius: 10px;  border: 1px solid #313438;">
        <div class="panel-heading text-white text-center mt-1">第4步：设置设备</div>
        <div class="panel-body ps-3 pe-3">
            <label class="text-gray">选择设备</label>
            <form id="editForm_device" class="form-horizontal" method="post" novalidate>
                {% csrf_token %}
                <!-- 检查此产品使用了几个设备  -->
                <select id="mySelectDevice" class="form-select form-select-sm ps-2 pt-1"
                        aria-label=".form-select-sm example"
                        style="height: 40px; background-color: #1e1f22; color: white; border: 1px solid grey;"
                        onchange="changed('mySelectDevice',7)">
                    <!--0代表检索平台名称, 1平台选择项检索 2检索实例名称  3实例选择项检索  -->
                    <option selected style="background-color: #2c2d2f;" value="0">请选择或新增</option>
                    {# 以下几句被js顶替了 #}
                </select>
                <label class="mt-2 text-danger add_chang7">新增↓</label>
                {{ form_device }}
                <!-- 保存删除  -->
                <div class="panel-footer text-center mt-3">
{#                    <button type="submit" class="btn btn-outline-success border-1 border-info me-4 p-2" id="SubmitBtn4" onclick="saveAction(4)">存设备</button>#}
                    <button type="button" class="btn btn-outline-danger border-1 border-light p-2 w-100" data-bs-toggle="modal" onclick="deleteAddAction('deleteModal',4)">删此设备</button>
                </div>
                <p id="edit4" class="mt-2 text-danger text-center fs-6"></p>
            </form>
        </div>

    </div>
    <!-- 保存删除(整体)  -->
    <div class="text-center mb-2 row d-flex justify-content-center align-items-center" >
      <button type="button" class="col-md-6 btn btn-outline-success border-1 border-info p-2" id="SubmitBtn" onclick="saveActiona(0)">保存全部</button>
      <button type="button" class="col-md-6 btn btn-outline-danger border-1 border-light p-2" data-bs-toggle="modal" onclick="deleteAddAction('deleteModal',0)">删除全部</button>
    </div>
</div>

<!-- 警告框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="background-color: #f2dede; color: #a94442"> <!--#edd9d7-->
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">删除确认</h5>
                {#        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>#}
            </div>
            <div class="modal-body">
                您确定要删除吗？这是一个不可逆的操作。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="canceDelete('deleteModal')">
                    取消
                </button>
                <button type="button" class="btn btn-danger" onclick="confirmDelete()">删除</button>
            </div>
        </div>
    </div>
</div>

<!-- 模态框:功能定义 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form id="editForm_fun" role="form" action="/setup/0/funDefine/">
                    {% csrf_token %}
                        <label style="margin-bottom: 10px">录入功能定义内容</label>
                        {{ form_fun }}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary btn-sm" onclick="saveActionb()">确认</button>
                <button type="button" class="btn btn-outline-youtube btn-sm" data-dismiss="modal" onclick="canceDelete('myModal')">取消</button>
                <input id="hideinput" alt="" type="hidden">
            </div>
            <p id="edit5" class="mt-2 text-danger text-center fs-6"></p>
        </div>
    </div>
</div>

<!-- 小模态框:有必填项没填 -->
<div class="modal fade" id="mySmallModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content border-5">
        <div id="mySmallModalDiv" type="button" class="btn btn-danger" data-dismiss="modal" onclick="canceDelete('mySmallModal')"></div>
    </div>
  </div>
</div>

<script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>

<script>
// 当页面加载完成后创建功能定义搜索框
window.onload = function() {
    // 1. 获取数据类型的对象,做为监听选择的是什么,然后具体再操作
    var dataType_dom = document.getElementById('dataType_id')
    // 监听数据类型的选择内容,并执行不同数据类型的录入表单样式
    dataType_dom.addEventListener('input', function (){ dataTypeForm(this.value) })
    //2.把功能定义的功能类型输入框设置为只读
    document.getElementById('funcType_id').readOnly = true
    document.getElementById('funcType_id').title = '此字段默认是"属性",暂时不支持修改'
    // 3. 给各个输入框加注释
    document.getElementById('name_id').title = '各平台名称，如：阿里平台，腾讯平台，百度平台（必须带有阿里，腾讯，百度这样的关键字）'
    document.getElementById('accessKey_id').title = '阿里云身份:点击控制台右上角图标-AccessKey管理可以查到,示例值:LTAI5tKw5CZYsy5899Dhw7Ac'
    document.getElementById('accessSecret_id').title = '密钥:点击控制台右上角图标-AccessKey管理可以生成,需要保留,产生时只显示一次,以后查不到的,示例值:vJawfGAoz9m6lozIfsy0LytwxmXdcB'
    document.getElementById('iotInstanceId_id').title = '实例ID:一般在产品设备左上角能查到,示例值:iot-06z00AbCd7xtx43'
    document.getElementById('iotInstanceId_alias_id').title = '实例ID别名,如:"阿里云实例...", "华为实例..."等'
    document.getElementById('clientId_id').title = '客户端ID:自定义,或者cn-shanghai或阿里云登录名等随便'
    document.getElementById('host_name_id').title = '根据阿里服务器放在哪里,用那里的城市名字,一般现在只有:华东2(上海)cn-shanghai'
    document.getElementById('consumerGroupId_id').title = '消费组,需要订阅的哪些内容,可以通过订阅服务里查到(或建立)'
    document.getElementById('product_key_id').title = '产品id(设备三元组,进入产品线,左上角,产品名称下边)复制即可'
    document.getElementById('product_key_alias_id').title = '产品线别名,如:"空调", "探测器", "温湿器"等'
    document.getElementById('device_name_id').title = '设备名称(设备三元组,进入具体的设备,点击:DeviceSecret ***查看)'
    document.getElementById('device_name_alias_id').title = '设备别名,如:"客厅", "卧室", "走廊"等'
    document.getElementById('device_secret_id').title = '设备密钥(设备三元组,进入具体的设备,点击:DeviceSecret ***查看)'
    // 4. 创建搜索框并添加事件监听器
    var searchBox = document.createElement('input');
    searchBox.type = 'text';
    searchBox.placeholder = '搜索↓:';
    searchBox.style.cssText = 'margin-bottom: 15px；margin-left: 15px; font-size: 13px; color: black; width: 50%;'; // 样式调整
    // 监听搜索单位输入框的键盘输入事件
    searchBox.addEventListener('input', function() {
        var input, filter, options, selectedOption, i;
        input = this.value.toUpperCase();
        filter = input.length > 0 ? input : null;
        select = document.getElementById("unit_id");
        options = select.getElementsByTagName('option');
        for (i = 0; i < options.length; i++) {
            selectedOption = options[i];
            if (selectedOption.innerText.toUpperCase().indexOf(filter) === -1) {
                selectedOption.style.display = 'none';
            } else {
                selectedOption.style.display = '';
            }
        }
    });
        // 定位到上边的label后边
        var labelForInput = document.querySelector('label[for="unit_id"]');
        labelForInput.appendChild(searchBox);
}

// 功能定义部分，执行不同数据类型的录入表单样式
function dataTypeForm(type){
    // 数值类，把数据定义的输入框和label信息显示
    if (type <= '3'){
        // 先枚举类删除
        enumDelete()
        // 把布尔值删除
        boolDelete()
        // 把Text类型删除
        textDelete()
        // 把date类型删除
        dateDelete()
        typeShow()
    }
    // 枚举类
    if (type === '4'){
        // 把数据类型隐藏
        typeHide()
        // 先枚举类删除
        enumDelete()
        // 把布尔值删除
        boolDelete()
        // 把Text类型删除
        textDelete()
        // 把date类型删除
        dateDelete()
        // 创建新标签，label枚举类文字
        newEnum()
        // 添加第一条空白数据数据
        enumButtonPro(1,window[enumButton])
        // 刚开始第一条时隐藏删除按钮
        document.getElementById('enumBtn1').style.display = 'none';
    }
    // 布尔类型
    if (type === '5'){
        // 把数据类型隐藏
        typeHide()
        // 先枚举类删除
        enumDelete()
        // 把布尔值删除
        boolDelete()
        // 把Text类型删除
        textDelete()
        // 把date类型删除
        dateDelete()
        // 创建新标签，bool类文字
        newBool()
    }
    // Text类型
    if(type === '6'){
        // 把数据类型隐藏
        typeHide()
        // 先枚举类删除
        enumDelete()
        // 把布尔值删除
        boolDelete()
        // 把Text类型删除
        textDelete()
        // 把date类型删除
        dateDelete()
        // 创建新标签，Text类文字
        newText()
    }
    // Date时间类型
    if(type === '7' || type === '8' || type === '9'){
        // 把数据类型隐藏
        typeHide()
        // 先枚举类删除
        enumDelete()
        // 把布尔值删除
        boolDelete()
        // 把Text类型删除
        textDelete()
        // 把date类型删除
        dateDelete()
        // 创建新标签，date类文字
        newDate(type)
    }
}

// 1.把数字类型的输入框和label信息显示
function typeShow(){
    // 把数据定义显示
    document.querySelector('label[for="dataDefine_id"]').style.display = 'none';  // 用不到,隐藏掉
    document.getElementById('dataDefine_id').style.display = 'none';  // 用不到,隐藏掉
    // 把最大值的输入框和label信息显示
    document.querySelector('label[for="max_id"]').style.display = '';
    document.getElementById('max_id').style.display = '';
    // 把最小值的输入框和label信息显示
    document.querySelector('label[for="min_id"]').style.display = '';
    document.getElementById('min_id').style.display = '';
    // 把步长的输入框和label信息显示
    document.querySelector('label[for="step_id"]').style.display = '';
    document.getElementById('step_id').style.display = '';
    // 把单位的输入框和label信息显示
    document.querySelector('label[for="unit_id"]').style.display = '';
    document.getElementById('unit_id').style.display = '';
    // 把枚举类删除
    enumDelete()
}

// 把数字类型的输入框和label信息隐藏
function typeHide(){
    // 把数据定义隐藏
    document.querySelector('label[for="dataDefine_id"]').style.display = 'none';
    document.getElementById('dataDefine_id').style.display = 'none';
    // 把最大值的输入框和label信息隐藏
    document.querySelector('label[for="max_id"]').style.display = 'none';
    document.getElementById('max_id').style.display = 'none';
    // 把最小值的输入框和label信息隐藏
    document.querySelector('label[for="min_id"]').style.display = 'none';
    document.getElementById('min_id').style.display = 'none';
    // 把步长的输入框和label信息隐藏
    document.querySelector('label[for="step_id"]').style.display = 'none';
    document.getElementById('step_id').style.display = 'none';
    // 把单位的输入框和label信息隐藏
    document.querySelector('label[for="unit_id"]').style.display = 'none';
    document.getElementById('unit_id').style.display = 'none';
}

// 2.创建新标签，枚举类
function newEnum(){
        var enumLabel0 = document.createElement('div');
        var enumLabel1 = document.createElement('label');
        var enumLabel2 = document.createElement('label');
        enumLabel0.type = 'text';
        enumLabel1.type = 'text';
        enumLabel2.type = 'text';
        enumLabel0.id = 'enumLabel0'
        enumLabel1.id = 'enumLabel1'
        enumLabel2.id = 'enumLabel2'
        enumLabel1.title = '支持整型，取值范围：-2147483648 ~ 2147483647';
        enumLabel2.title = '支持中文、英文大小写、日文、数字、下划线和短划线，必须以中文、英文或数字开头，不超过20个字符';
        enumLabel0.innerHTML = '枚举项'
        enumLabel1.innerHTML = '参考值 ㉿?'
        enumLabel2.innerHTML = '参数描述 ㉿?'
        enumLabel0.style.cssText = 'margin-bottom: 15px；margin-left: 25px; font-size: 13px; color: black; width: 50%;'; // 样式调整
        enumLabel1.style.cssText = 'margin-bottom: 15px；margin-left: 25px; font-size: 13px; color: black; width: 50%;'; // 样式调整
        enumLabel2.style.cssText = 'margin-bottom: 15px；margin-left: 25px; font-size: 13px; color: black; width: 50%;'; // 样式调整
        // 定位到dataType_id下边
        var enumType = document.getElementById('dataType_id').parentNode
        var enumType0 = enumType.appendChild(enumLabel0).parentNode;
        var enumType1 = enumType0.appendChild(enumLabel1).parentNode;
        var enumType2 = enumType1.appendChild(enumLabel2).parentNode;
        // 创建按钮：+添加枚举项
        var enumButton = document.createElement('button');
        enumButton.type = 'button';
        enumButton.id = 'enumButton';
        enumButton.textContent = '+添加枚举项'
        enumButton.style.cssText = 'margin-bottom: 15px；margin-left: 25px; font-size: 14px; color: blue; border: none; background: white;'; // 样式调整
        {#var enumButton = enumBtn1.appendChild(enumButton)  //.parentNode#}
        window[enumButton] = enumType2.appendChild(enumButton)  //.parentNode
        // 为'+添加枚举项'按钮绑定点击事件
        enumButton.addEventListener('click', function() {
            let i = 1;
            enumInput = 'enumInput'+i
            while (document.getElementById(enumInput)) {
              i++;
              enumInput = 'enumInput'+i
            }
            enumButtonPro(i,enumButton);
        });
}

// 点击:+添加枚举项 按钮
function enumButtonPro(i,enumInput,data=['','']){
    let data1 = data[0]
    let data2 = data[1]
    // 创建枚举项输入框:参考值 和 参数描述
    let ii = i+1
    let enum1 = 'enumInput'+i
    let enum2 = 'enumInput'+ii
    let btn1 = 'enumBtn'+i
    window[enum1] = document.createElement('input')
    window[enum2] = document.createElement('input')
    window[btn1] = document.createElement('button')
    window[enum1].id = enum1
    window[enum2].id = enum2
    window[btn1].id = btn1

    window[enum1].type = 'text'
    window[enum2].type = 'text'
    window[btn1].type = 'button'

    window[enum1].value = data1
    window[enum2].value = data2

    window[enum1].className = 'enumInputClass'
    window[enum2].className = 'enumInputClass'
    window[btn1].className = 'enumInputClass'

    window[enum1].placeholder = "编号如'0'";
    window[enum2].placeholder = "对该枚举项的描述";
    window[btn1].textContent = "删除";

    window[enum1].style.cssText = 'margin-bottom: 15px；margin-left: 25px; font-size: 15px; color: black; width: 45%; height:30px;'; // 样式调整
    window[enum2].style.cssText = 'margin-bottom: 15px；margin-left: 25px; font-size: 15px; color: black; width: 45%; height:30px;'; // 样式调整
    window[btn1].style.cssText = 'margin-bottom: 15px；margin-left: 25px; font-size: 14px; color: blue; border: none; background: white; width: 10%; height:30px;'; // 样式调整
    // 将新元素添加到已存在元素之上,第二参数为参照点，即插入在其之前，如果设为null则插在最后
    enumInput.parentNode.insertBefore(window[enum1], enumInput);
    enumInput.parentNode.insertBefore(window[enum2], enumInput);
    enumInput.parentNode.insertBefore(window[btn1], enumInput);
    // 多条时显示第一条的删除按钮
    if(window[enum1]){
        document.getElementById('enumBtn1').style.display = '';
    }
    // 为'删除'按钮绑定点击事件
    window[btn1].addEventListener('click', function() {
        btnId = window[btn1].id
        deleteInput(btnId)
    });
}

// 删除枚举项输入框
function deleteInput(btnId){
  // 把枚举类删除enumInput2  enumBtn1
    var num1 = parseInt(btnId.slice(7), 10)
    var num2 = parseInt(btnId.slice(7), 10)+1
    var input1 = 'enumInput'+num1
    var input2 = 'enumInput'+num2
    document.getElementById(input1).remove();
    document.getElementById(input2).remove();
    document.getElementById(btnId).remove();
}

// 把原来存储的枚举类删除,^=表示以指定的值开始; *=表示包含; $=表示结尾
function enumDelete(){
    var elements = document.querySelectorAll('[id^="enum"]');
    for(i=0; i<elements.length; i++){
        elements[i].remove()
    }
}

// 3.创建新标签，布尔类
function newBool(data=['','']){
    data1 = data[0]
    data2 = data[1]
    var boolDiv = document.createElement('div');
    var boolLabel1 = document.createElement('label');
    var boolInput1 = document.createElement('input');
    var boolLabel2 = document.createElement('label');
    var boolInput2 = document.createElement('input');
    boolDiv.type = 'text'
    boolLabel1.type = 'text'
    boolLabel2.type = 'text'
    boolInput1.type = 'text'
    boolInput2.type = 'text'

    boolDiv.id = 'boolDiv'
    boolLabel1.id = 'boolLabel1'
    boolLabel2.id = 'boolLabel2'
    boolInput1.id = 'boolInput1'
    boolInput2.id = 'boolInput2'

    boolInput1.placeholder = '如：关'
    boolInput2.placeholder = '如：开'

    boolInput1.value = data1
    boolInput2.value = data2

    boolInput1.className = 'enumInputClass'
    boolInput2.className = 'enumInputClass'

    boolDiv.innerHTML = '布尔值'
    boolLabel1.innerHTML = '0 ~'
    boolLabel2.innerHTML = '1 ~'

    boolDiv.style.cssText = 'font-size: 15px; color: black;'; // 样式调整
    boolLabel1.style.cssText = 'text-align: center; font-size: 15px; color: black; width: 10%;'; // 样式调整
    boolInput1.style.cssText = 'font-size: 15px; color: black; width: 90%;'; // 样式调整
    boolLabel2.style.cssText = 'text-align: center; font-size: 15px; color: black; width: 10%;'; // 样式调整
    boolInput2.style.cssText = 'font-size: 15px; color: black; width: 90%;'; // 样式调整
    // 定位到dataType_id下边
    var boolType = document.getElementById('dataType_id').parentNode
    var boolDiv = boolType.appendChild(boolDiv).parentNode;
    var boolLabel1 = boolDiv.appendChild(boolLabel1);
    var boolInput1 = boolDiv.appendChild(boolInput1).parentNode;
    var boolLabel2 = boolInput1.appendChild(boolLabel2);
    var boolInput2 = boolInput1.appendChild(boolInput2).parentNode;
}

// 把布尔值类型删除
function boolDelete(){
    var elements = document.querySelectorAll('[id^="bool"]');
    for(i=0; i<elements.length; i++){
        elements[i].remove()
    }
}

// 4.创建新标签，Text类
function newText(data='') {
    var textDiv = document.createElement('div');
    var textInput = document.createElement('input');
    var textLabel = document.createElement('label');
    textDiv.type = 'text'
    textInput.type = 'text'
    textLabel.type = 'text'

    textDiv.id = 'textDiv'
    textInput.id = 'textInput'
    textLabel.id = 'textLabel'

    textDiv.innerHTML = '数据长度'
    if(data === ''){
        textInput.value = 10240
    }else{
        textInput.value = data
    }

    textLabel.innerHTML = '字节'
    textLabel.readOnly = true

    textInput.className = 'enumInputClass'

    textDiv.style.cssText = 'font-size: 15px; color: black;'; // 样式调整
    textInput.style.cssText = 'font-size: 15px; color: black; width: 90%;'; // 样式调整
    textLabel.style.cssText = 'font-size: 15px; color: black; width: 10%; padding-left: 5px;'; // 样式调整

    // 定位到dataType_id下边
    var textType = document.getElementById('dataType_id').parentNode
    var textDiv = textType.appendChild(textDiv).parentNode
    var textInput = textDiv.appendChild(textInput)
    var textLabel = textDiv.appendChild(textLabel).parentNode
}

// 删除Text类型
function textDelete(){
    var elements = document.querySelectorAll('[id^="text"]');
    for(i=0; i<elements.length; i++){
        elements[i].remove()
    }
}

// 5.创建data新标签
function newDate(type){
    var dateDiv1 = document.createElement('div');
    var dateDiv2 = document.createElement('div');
    dateDiv1.type = 'text'
    dateDiv2.type = 'text'
    dateDiv1.id = 'dateDiv1'
    dateDiv2.id = 'dateDiv2'
    if(type==='7'){dateDiv1.innerHTML = '时间格式：'; dateDiv2.innerHTML = 'String类型的UTC时间戳（毫秒）'}
    if(type==='8'){dateDiv1.innerHTML = 'JSON 对象：'; dateDiv2.innerHTML = '暂时采用系统默认值'}
    if(type==='9'){dateDiv1.innerHTML = '元素类型：'; dateDiv2.innerHTML = '类型和个数暂时采用系统默认值'}

    dateDiv1.style.cssText = 'font-size: 15px; color: black;'; // 样式调整
    dateDiv2.style.cssText = 'font-size: 15px; color: black; background-color: #f7f7f7; color: grey; padding-left: 20px; padding-top: 5px; padding-bottom: 5px;'; // 样式调整
    // 定位到dataType_id下边
    var dateType = document.getElementById('dataType_id').parentNode
    var dateDiv1 = dateType.appendChild(dateDiv1).parentNode
    var dateDiv2 = dateDiv1.appendChild(dateDiv2).parentNode
}

// 删除data标签
function dateDelete(){
    var elements = document.querySelectorAll('[id^="date"]');
    for(i=0; i<elements.length; i++){
        elements[i].remove()
    }
}

// 检测表单各项是否录入齐全
function isFormFilled(formId,mindex) {
    var isif = 'true'
    var $form = $('#' + formId);
    {#if (formId==='editForm_product'){mi = 3}else{mi = 3} //如果是device来检查的,则要在减1#}
    $form.find(':input').each(function (index, item) {
        // 因为0是crsf，1是选择框，最后第三个是上一级关联字段,后边两个是提交和删除按钮, 所以都要排除掉 $form.find(':input').length - 3
        if (index > 1 && index <= mindex){
        {#alert('index:'+index+' item:'+item+' $(this).attr("name"):'+$(this).attr('name')+' $(this).val(): '+$(this).val())#}
        if ($(this).val().trim() === '' || $(this).val() === 0) {
            if (isif === 'true'){ isif = 'false'; return false }
        }
        }
    });
        return isif; // isif由上边赋值,得到是true,还是false
}

// 当前要删除的ID，先赋默认值
var DELETE_ID, DELETE_setup
if (DELETE_ID !== null && DELETE_ID !== undefined) {} else { DELETE_ID = 0; DELETE_setup = ''}

// 当平台，实例，产品，设备选择框变化时，和它底下的名称输入框有变化时，执行以下changed()函数
function changed(mid, cs) {
        // pid=mid是从表单传来的<form id=mid>里的id值:'mySelectDevice'等
        // cs: 是要执行下边哪些工作
        // 先检测上几级的数据是否齐全,才可继续下边的事情
        editForm = ["editForm_plat", "editForm_plat", "editForm_example", "editForm_example", "editForm_product", "editForm_product", "editForm_device", "editForm_device"]
        searchs = ['#name_id', '#name_id', '#iotInstanceId_id', '#iotInstanceId_id', '#product_key_id', '#product_key_id', '#device_name_id', '#device_name_id']
        {#var mindexs = [5,5, 7,7, 4,4, 5,5]  // 这里有检查关联id#}
        var mindexs = [4,4, 6,6, 3,3, 4,4] // 这里没有检查关联id
        // cs=0,1; cs=2,3; cs=4,5; cs=6,7;
        mcs = cs
        if (cs=='12'){mcs=7} //如果是功能定义进来，就缩小到跟设备同一级去检查上级是否录入齐全
        // 循环检查上几级表单是否录入齐全
        for (let i = 2; mcs >= 2;) {  //第一个表单不用检测,并且循环找到最前面都要检查
            var formId = editForm[mcs - 2]  // 查的是上一级的
            var mindex = mindexs[mcs - 2]   // 上一级需要检测几个字段
            isFilled = isFormFilled(formId, mindex)
            if (isFilled === 'false') {
                var searchID = searchs[cs]  // 清空的是本输入框
                {#alert('请注意, 前面有必填项没填！');#}
                deleteAddAction('mySmallModal',0, '请注意, 前面有必填项没填！') //进入模态框: 请注意, 前面有必填项没填！
                $(searchID).focus()
                $(searchID).val('')
                return false
            }
            mcs -= i
        }
        //如果是设备进来,就让其多检查一次fun功能定义是否有值
        if(cs=='4'){}

        // 如果是功能定义进来的，需要给其找到toProductFuc_id值后,再调用功能定义表单操作
        if (mid == 'editForm_fun'){
            document.getElementById('editForm_fun').reset();  // 新增,就把原有的数据清空
            mmid = $('#mySelectProduct').val()
            $('#toProductFuc_id').val(mmid)
            deleteAddAction('myModal',0)  // 进入模态框，录入功能定义
            // 是功能定义来的就返回，不做以下别人那样的下拉框检索赋值动作了
            return
        }

        // pid是此产品id的值, fun跟product一样
        pid = document.getElementById(mid).value

        // 向后端请求数据
        if (pid != '0') {   // 把'请选择xxx'的排除,并赋值为空
            $.ajax({
                url: "/setup/mySelectPlat",
                type: "GET",
                data: {pid: pid, cs: cs},
                dataType: "JSON",  //加上这个，表示要接受JSON格式,若不是也无妨,看自己如何解析
                success: function (res) {
                    $('.add_chang' + cs).text('修改↓')
                    if (res.status) {
                        //查询成功有值,赋值给页面显示
                        // 这个后端已经是json字典过来,不用再转换了
                        var plat_obj = res.plat_obj;   // input框要显示的数据
                        // 反序列化
                        var plat_example_obj = JSON.parse(res.plat_example);  // option要被选择的数据
                        if (cs == '0' | cs == '1') {  // 选择平台时
                            $('#name_id').val(plat_obj.name);
                            $('#accessKey_id').val(plat_obj.accessKey);
                            $('#accessSecret_id').val(plat_obj.accessSecret);
                            //$('#toAdmin_id').val(plat_obj.toAdmin_id);
                            var mySelect = '#mySelectExample'
                            var selectname = 'item.fields.iotInstanceId'
                            var editForm = 'editForm_plat'
                            var setup = 'plat'
                            var text = '请选择或新增'  // 下一级选择框的提示文本
                            var emptyDict = ['editForm_example', 'editForm_product', 'editForm_device']
                            var mto = '#toPlat_id'
                            var name_palt = 'plat_obj.name'
                        }
                        if (cs == '2' | cs == '3') { // 选择实例时example
                            $('#iotInstanceId_id').val(plat_obj.iotInstanceId);
                            $('#iotInstanceId_alias_id').val(plat_obj.iotInstanceId_alias);
                            $('#clientId_id').val(plat_obj.clientId);
                            $('#host_name_id').val(plat_obj.host_name);
                            $('#consumerGroupId_id').val(plat_obj.consumerGroupId);
                            $('#toPlat_id').val(plat_obj.toPlat);
                            //$('#toPlat_id').append($('<option>', {value:plat_obj.toPlat_id, text: plat_obj.toPlat}));
                            var mySelect = '#mySelectProduct' // 下一级select选项
                            var selectname = 'item.fields.product_key' // 下一级select-option选项的文本内容
                            var editForm = 'editForm_example' // 要提交的表单
                            var setup = 'example' // 提交表单时要附带的参数
                            var text = '请选择或新增'  // 下一级选择框的提示文本
                            var emptyDict = ['editForm_product', 'editForm_device']
                            var mto = '#toExample_id'
                            var name_palt = 'plat_obj.iotInstanceId'
                        }
                        if (cs == '4' | cs == '5') { // 选择产品时product,会返回产品和功能定义两部分数据
                            $('#product_key_id').val(plat_obj.product_key);
                            $('#product_key_alias_id').val(plat_obj.product_key_alias);

                            $('#toExample_id').val(plat_obj.toExample);
                            var mySelect = '#mySelectDevice'    // 下一级select选项
                            var selectname = 'item.fields.device_name' // 下一级select-option选项的文本内容
                            var editForm = 'editForm_product'  // 要提交的表单
                            var setup = 'product'  // 提交表单时要附带的参数
                            var text = '请选择或新增'  // 下一级选择框的提示文本
                            var emptyDict = ['editForm_device'] // 下一级要清空的表单内容
                            var mto = '#toProduct_id'  // 关联下一级的数据选项
                            var name_palt = 'plat_obj.product_key'
                            // 反序列化, 这个返回值product_fun只有=4或者=5时才有的
                            var product_fun = JSON.parse(res.product_fun);  // option要被选择的数据
                            // 显示功能定义表格
                            funTable('myTable tbody',product_fun)
                        }

                        if (cs == '6' | cs == '7') { // 选择设备devic_name时
                            // $('#product_key_id').val('');
                            $('#device_name_id').val(plat_obj.device_name);
                            $('#device_name_alias_id').val(plat_obj.device_name_alias);
                            $('#device_secret_id').val(plat_obj.device_secret);
                            $('#toProduct_id').val(plat_obj.toProduct);

                            var editForm = 'editForm_device'  // 要提交的表单
                            var setup = 'device'  // 提交表单时要附带的参数

                        }


                        if (cs <= 5) {
                            $(function () {
                                $.each(emptyDict, function (index, item) {
                                    document.getElementById(item).reset();   // 清空下一级表单内容
                                    //document.getElementById(item).disabled = true;  // 禁用表单
                                });
                                var select = $(mySelect);                 // 设置选择框内容，由变量mySelect决定
                                select.empty(); // 清空现有选项,重新赋值
                                select.append($('<option>', {value: "0", text: text}));
                                $.each(plat_example_obj, function (index, item) {
                                    select.append($('<option>', {
                                        value: item.pk,
                                        text: eval(selectname)           // 变量selectname执行item.fields.xxx后得到
                                    }));
                                });
                            });

                            var select = $(mto);  // 关联上一级的数据选项ID
                            select.empty();
                            select.append($('<option>', {
                                value: plat_obj.id,
                                text: eval(name_palt)
                            }))
                        }
                        // 设置表单的action属性，并拼接上记录ID, 这里是修改
                        //var form = document.getElementById(editForm); // 这个get返回的是直接这个DOM对象
                        var form = $('#' + editForm).get(0);         // $这个返回的是jQuery对象，里面可以封装更多元素，如$('#editForm').get(0)可以获取到第一个DOM对象
                        form.action = '/setup/' + plat_obj.id + '/' + setup + '/';    // 提交的是哪张表单,由变量setup来决定
                        DELETE_ID = plat_obj.id
                        DELETE_setup = setup
                        // 可以在这里提交表单，如果你想要的话
                        // form.submit();

                    } else {
                        // 查询返回是空False时：只留检索的名称，其他的清空
                        if (cs == '0' | cs == '1') {
                            $('#accessKey_id').val('');
                            $('#accessSecret_id').val('');
                            //$('#toAdmin_id').val('');
                            $('#mySelectExample').empty(); // 清空实例选项
                            $('#mySelectExample').append($('<option>', {value: "0", text: '请选择或新增'}))  // 增加提示

                            $('#iotInstanceId_id').val('');
                            $('#iotInstanceId_alias_id').val('');
                            $('#clientId_id').val('');
                            $('#host_name_id').val('');
                            $('#consumerGroupId_id').val('');
                            $('#mySelectProduct').empty(); // 清空产品选项
                            $('#mySelectProduct').append($('<option>', {value: "0", text: '请选择或新增'}))  // 增加提示

                            $('#product_key_alias_id').val('');
                            $('#functype_id').val('');

                            $('#mySelectDevice').empty(); // 清空设备选项
                            $('#mySelectDevice').append($('<option>', {value: "0", text: '请选择或新增'}))

                            // $('#product_key_id').val('');
                            $('#device_name_id').val('');
                            $('#device_name_alias_id').val('');
                            $('#device_secret_id').val('');


                            var editForm = 'editForm_plat'
                            var setup = 'plat'
                        }

                        if (cs == '2' | cs == '3') {
                            // $('#iotInstanceId_id').val('');
                            $('#iotInstanceId_alias_id').val('');
                            $('#clientId_id').val('');
                            $('#host_name_id').val('');
                            $('#consumerGroupId_id').val('');
                            $('#mySelectProduct').empty(); // 清空产品选项
                            $('#mySelectProduct').append($('<option>', {value: "0", text: '请选择或新增'}))  // 增加提示

                            // $('#product_key_id').val('');
                            $('#product_key_alias_id').val('');

                            $('#mySelectDevice').empty(); // 清空设备选项
                            $('#mySelectDevice').append($('<option>', {value: "0", text: '请选择或新增'}))


                            $('#device_name_id').val('');
                            $('#device_name_alias_id').val('');
                            $('#device_secret_id').val('');


                            var editForm = 'editForm_example'
                            var setup = 'example'
                        }

                        if (cs == '4' | cs == '5') {
                            // $('#product_key_id').val('');
                            $('#product_key_alias_id').val('');

                            $("#myTable tbody").empty(); // 清空表格体(功能定义)
                            $('#mySelectDevice').empty(); // 清空设备选项
                            $('#mySelectDevice').append($('<option>', {value: "0", text: '请选择或新增'}))  // 增加提示

                            // $('#product_key_id').val('');
                            $('#device_name_id').val('');
                            $('#device_name_alias_id').val('');
                            $('#device_secret_id').val('');


                            var editForm = 'editForm_product'
                            var setup = 'product'
                        }

                        if (cs == '6' | cs == '7') {
                            {#$('#device_name_id').val('');#}
                            $('#device_name_alias_id').val('');
                            $('#device_secret_id').val('');

                            var editForm = 'editForm_device'
                            var setup = 'device'
                        }

                        // 设置表单的action属性，并拼接上记录ID, 这里是新增
                        // var form = document.getElementById(editForm);  // 这个get返回的是直接这个DOM对象
                        var form = $('#' + editForm).get(0);         // $这个返回的是jQuery对象，里面可以封装更多元素，如$('#editForm').get(0)可以获取到第一个DOM对象
                        form.action = '/setup/0/' + setup + '/';
                    }
                }
            })
        } else {
            // 这里是从"请选择xxx"等进来的，就要清空，只保留选择项内容, 让用户输入新增的内容
            for (let i = cs; i <= 7; i = i+2) {
              $('.add_chang' + i).text('新增↓')
            }
            if (cs == '0' | cs == '1') {
                $('#name_id').val('');
                $('#accessKey_id').val('');
                $('#accessSecret_id').val('');
                //$('#toAdmin_id').val('');

                document.getElementById('editForm_example').reset();  // 清空实例输入框内容
                $('#mySelectExample').empty(); // 清空实例选项
                $('#mySelectExample').append($('<option>', {value: "0", text: '请选择或新增'}))
                $('#toPlat_id').val('');

                document.getElementById('editForm_product').reset();  // 清空产品输入框内容
                $('#mySelectProduct').empty(); // 清空产品选项
                $('#mySelectProduct').append($('<option>', {value: "0", text: '请选择或新增'}))
                $('#toProduct_id').val('');
                $("#myTable tbody").empty(); // 清空表格体(功能定义)

                document.getElementById('editForm_device').reset();  // 清空设备输入框内容
                $('#mySelectDevice').empty(); // 清空设备选项
                $('#mySelectDevice').append($('<option>', {value: "0", text: '请选择或新增'}))
                $('#toDevice_id').val('');

                document.getElementById('editForm_fun').reset();  // 清空功能定义内容
                {#$('#mySelectDevice').empty(); // 清空设备选项#}
                {#$('#mySelectDevice').append($('<option>', {value: "0", text: '请选择或新增'}))#}
                $('#toProductFuc_id').val('');
            }
            if (cs == '2' | cs == '3') {
                $('#iotInstanceId_id').val('');
                $('#iotInstanceId_alias_id').val('');
                $('#clientId_id').val('');
                $('#host_name_id').val('');
                $('#consumerGroupId_id').val('');
                //$('#toPlat_id').val('');

                document.getElementById('editForm_product').reset();  // 清空产品输入框内容
                $('#mySelectProduct').empty(); // 清空产品选项
                $('#mySelectProduct').append($('<option>', {value: "0", text: '请选择或新增'}))  // 增加提示
                $('#toExample_id').val('');
                $("#myTable tbody").empty(); // 清空表格体(功能定义)

                document.getElementById('editForm_device').reset();  // 清空设备输入框内容
                $('#mySelectDevice').empty(); // 清空设备选项
                $('#mySelectDevice').append($('<option>', {value: "0", text: '请选择或新增'}))
                $('#toProduct_id').val('');

                document.getElementById('editForm_fun').reset();  // 清空功能定义内容
                {#$('#mySelectDevice').empty(); // 清空设备选项#}
                {#$('#mySelectDevice').append($('<option>', {value: "0", text: '请选择或新增'}))#}
                $('#toProductFuc_id').val('');

            }
            if (cs == '4' | cs == '5') {
                if (cs == '5') {
                    $('#product_key_id').val('')
                }  // 不是检索来的，就要清空
                $('#product_key_alias_id').val('');
                $("#myTable tbody").empty(); // 清空表格体(功能定义)

                document.getElementById('editForm_device').reset();  // 清空设备输入框内容
                $('#mySelectDevice').empty(); // 清空设备选项
                $('#mySelectDevice').append($('<option>', {value: "0", text: '请选择或新增'}))
                $('#toProduct_id').val('');
            }

                document.getElementById('editForm_fun').reset();  // 清空功能定义内容
                {#$('#mySelectDevice').empty(); // 清空设备选项#}
                {#$('#mySelectDevice').append($('<option>', {value: "0", text: '请选择或新增'}))#}
                $('#toProductFuc_id').val('');

            if (cs == '6' | cs == '7') {
                $('#device_name_id').val('');
                $('#device_name_alias_id').val('');
                $('#device_secret_id').val('');
                //$('#toProduct_id').val('');
            }
        }
    }

// 保存全部,新写的函数
function saveActiona(med) {
    $.ajax({
        url: '/setup/0/all/',
        data: {'editForm_plat': $('#editForm_plat').serialize(),
               'editForm_example': $('#editForm_example').serialize(),
               'editForm_product': $('#editForm_product').serialize(),
               'editForm_device': $('#editForm_device').serialize(),
               'editForm_fun': $('#editForm_fun').serialize()  // editForm_fun有后端临时数据“my-list”顶替了
                },
        type: "POST",
        async: false, // 设置为同步
        dataType: "JSON", // 指定接收JSON,也可指定HTML等
        success: function (response) {
            if (!response.status) {
                    // 显示错误信息
                    $.each(response.errors, function(key, value){
                        mkey = key + 1
                        $('#edit'+mkey).text(value)
                        if (mkey==5 && value != ''){$('#edit'+mkey).text('功能定义：'+value)}
                    })
                    deleteAddAction('mySmallModal', 0, '有必填项没填')  // 弹窗提示信息框
                }else{
                {#// 更新各个选择框#}
                {#selectFunc()#}
                {#// 清空错误提示#}
                {#for (let i = 1; i < 5; i++) { $('#edit'+i).text('') }#}
                deleteAddAction('mySmallModal', 0, '保存成功')  // 弹窗提示信息框
                setTimeout(function () { location.reload() }, 2000)
            }
        }
    })
 }

 // 保存确认功能定义,新写的函数
function saveActionb(){
    // 获取数据类型
    mtype = document.getElementById('dataType_id').value
    // 数值类型
    if (mtype <= '3'){
        // 把数据定义填上
        document.getElementById('dataDefine_id').value = '取值范围:'+document.getElementById('min_id').value+'~'+document.getElementById('max_id').value+'~'+document.getElementById('step_id').value
    }
    // 枚举类
    if (mtype === '4'){
        // 选取所有类名为 "enumInputClass" 的元素
        let elements = document.querySelectorAll('.enumInputClass');
        let dataDefineAll = '枚举值: '
        let mda = 0
        let mdb = 1
        // 遍历所有选中的元素并执行操作
        elements.forEach(function(element) {
            if(element.placeholder === "编号如'0'") {
                // 参考值
                if(element.value != '' && mdb > 0){
                    dataDefineAll += element.value+'~'
                    mda +=1
                }else{mda = 0}
            }
            if(element.placeholder === "对该枚举项的描述" && mda > 0) {
                // 参数描述
                if(element.value != '') {
                    dataDefineAll += element.value + '; '
                    mdb += 1
                }else{mdb = 0}
            }
        });
            // 只有枚举项两个都齐全才算填齐了
            if (mda != 0 && mdb != 0){
            document.getElementById('dataDefine_id').value = dataDefineAll.slice(0, -2) // 把最后的'; '去掉
            document.getElementById('min_id').value = 0
            document.getElementById('max_id').value = 0
            document.getElementById('step_id').value = 0
            document.getElementById('unit_id').value = '1'
            }
    }
    // 布尔类
    if (mtype === '5'){
        let dataDefineAll = '布尔值: '
        let label1 = document.getElementById('boolLabel1').innerHTML
        let label2 = document.getElementById('boolLabel2').innerHTML
        let input1 = document.getElementById('boolInput1').value
        let input2 = document.getElementById('boolInput2').value
        // 只有布尔值都填齐了
        if(input1 !='' && input2 != ''){
            dataDefineAll = dataDefineAll + String(label1) + String(input1) + ';' + String(label2) + String(input2)
            document.getElementById('dataDefine_id').value = dataDefineAll
            document.getElementById('min_id').value = 0
            document.getElementById('max_id').value = 0
            document.getElementById('step_id').value = 0
            document.getElementById('unit_id').value = '1'
        }
    }
    // Text类
    if (mtype === '6'){
        let dataDefineAll = document.getElementById('textInput').value
        // 只有Text框有值
        if(dataDefineAll !=''){
            document.getElementById('dataDefine_id').value = dataDefineAll
            document.getElementById('min_id').value = 0
            document.getElementById('max_id').value = 0
            document.getElementById('step_id').value = 0
            document.getElementById('unit_id').value = '1'
        }
    }
    // date类
    if (mtype === '7' || mtype === '8' || mtype === '9'){
        // date,strut,array类采用默认值则可
            if(mtype === '7'){document.getElementById('dataDefine_id').value = 'date'}
            if(mtype === '8'){document.getElementById('dataDefine_id').value = 'strut'}
            if(mtype === '9'){document.getElementById('dataDefine_id').value = 'array'}
            document.getElementById('min_id').value = 0
            document.getElementById('max_id').value = 0
            document.getElementById('step_id').value = 0
            document.getElementById('unit_id').value = '1'
    }
    // 获取是第几条记录,做为是新增还是修改,删除判断用
    mbb = document.getElementById('hideinput').value
     $.ajax({
         url: '/setup/'+mbb+'/funAction/',
         data: $('#editForm_fun').serialize(),
         type: "POST",
         async: false, // 设置为同步
         dataType: "JSON", // 指定接收JSON,也可指定HTML等
         success: function (response) {
            if(response.status){
                canceDelete('myModal')
                {#var product_fun = JSON.parse(response.form);  // 功能定义列表,反序列化#}
                var product_fun = response.form_fun;
                {#alert('回来了:'+product_fun)#}
                // 显示功能定义表格
                funTable('myTable tbody',product_fun)
            }else{
                deleteAddAction('mySmallModal', 0, response.message)  // 弹窗提示信息框
            }
         }
      })
 }

// 功能定义表格显示
function funTable(tableToby,data){
     $("#"+tableToby).empty(); // 清空表格体
     $.each(data, function (key, value) {
        $("#myTable tbody").append("<tr>" +
        "<td style='display: none'>" + value.pk + "</td>" +
        "<td class='col-md-4' style='background: #2c2d2f; color: white;;  padding: 0.5rem 0 0.3rem 0'>" + value.fields.funcName + "</td>" +
        "<td class='col-md-5' style='background: #2c2d2f; color: white;;  padding: 0.5rem 0 0.3rem 0'>" + value.fields.Identifier + "</td>" +
        "<td class='col-md-3 text-center' style='background: #2c2d2f; color: white; padding: 0.5rem 0 0.3rem 0'>" +
        "<a class='btn btn-outline-warning btn-sm' href='#' style='padding: 0.1rem;' onclick='viewFun(event,1)'>修改</a>" +
        "<button type='button' class='btn btn-outline-danger btn-sm' data-bs-toggle='modal' onclick='viewFun(event,2)' style='padding: 0.1rem;'>删除</button> </td>" +
        "</tr>");
     });
        $('#edit5').text('')  // 清空功能定义错误信息
}

// 进入功能定义修改
function viewFun(event, ma) {
    // 获取按钮的父元素（行）
    var row = event.target.parentNode.parentNode;
    // 获取所有行，并计算点击的按钮所在的行号（从0开始）
    var rows = document.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++) {
        if (row === rows[i]) {
            {#alert('行号: ' + i);#}
            $.ajax({
                url: '/setup/' + i + '/funAction/',
                data: {'type': ma},
                type: "POST",
                async: false, // 设置为同步
                dataType: "JSON", // 指定接收JSON,也可指定HTML等
                success: function (response) {
                    // 如果是修改返回来的
                    if (ma == 1) {
                        $('#funcName_id').val(response.form_fun.fields.funcName)
                        $('#funcType_id').val(response.form_fun.fields.funcType)
                        $('#Identifier_id').val(response.form_fun.fields.Identifier)
                        $('#dataType_id').val(response.form_fun.fields.dataType)
                        $('#dataDefine_id').val(response.form_fun.fields.dataDefine)
                        $('#min_id').val(response.form_fun.fields.min)
                        $('#max_id').val(response.form_fun.fields.max)
                        $('#step_id').val(response.form_fun.fields.step)
                        $('#unit_id').val(response.form_fun.fields.unit)
                        $('#toProductFuc_id').val(response.form_fun.fields.toProductFuc)

                        let mtypeX = response.form_fun.fields.dataType
                        // 数值类型
                        if(mtypeX <= 3){
                            // 把枚举类删除
                            enumDelete()
                            // 把布尔值删除
                            boolDelete()
                            // 把老的Text删除
                            textDelete()
                            // 把老的date删除
                            dateDelete()
                            // 显示数值类型
                            typeShow()
                        }
                        // 枚举类型
                        if(String(mtypeX) === '4'){
                            // 隐藏数值类型
                            typeHide()
                            // 把老的枚举类删除
                            enumDelete()
                            // 把老的布尔值删除
                            boolDelete()
                            // 把老的Text删除
                            textDelete()
                            // 把老的date删除
                            dateDelete()
                            // 创建枚举类新标签，label枚举类文字
                            newEnum()
                            // 添加第一条空白数据数据
                            var dataDefi = response.form_fun.fields.dataDefine.split(":")[1]
                            var dataDefiList = dataDefi.split(";")
                            var ia = -1
                            for(let i=1; i<dataDefiList.length +1 ; i++){
                                var data1 = dataDefiList[i-1].split("~")[0]
                                var data2 = dataDefiList[i-1].split("~")[1]
                                data=[data1, data2]
                                ia = ia + 2
                                enumButtonPro(ia, window[enumButton], data)
                            }
                        }
                        // 布尔类型
                        if(String(mtypeX) === '5'){
                            // 隐藏最大值等数据...
                            typeHide()
                            // 把老的枚举类删除
                            enumDelete()
                            // 把老的布尔值删除
                            boolDelete()
                            // 把老的Text删除
                            textDelete()
                            // 把老的date删除
                            dateDelete()
                            // 创建布尔类新标签
                            var dataDefi = response.form_fun.fields.dataDefine.split(":")[1]
                            var dataDefiList = dataDefi.split(";")
                            var data = [dataDefiList[0].split("~")[1], dataDefiList[1].split("~")[1]]
                            newBool(data)
                        }
                        // Text类型
                        if(String(mtypeX) === '6'){
                            // 隐藏最大值等数据...
                            typeHide()
                            // 把老的枚举类删除
                            enumDelete()
                            // 把老的布尔值删除
                            boolDelete()
                            // 把老的Text删除
                            textDelete()
                            // 把老的date删除
                            dateDelete()
                            // 创建Text类新标签
                            var data = response.form_fun.fields.dataDefine
                            newText(data)
                        }
                        // date,strut,array类型
                        if(String(mtypeX) === '7' || String(mtypeX) === '8' || String(mtypeX) === '9'){
                            // 隐藏最大值等数据...
                            typeHide()
                            // 把老的枚举类删除
                            enumDelete()
                            // 把老的布尔值删除
                            boolDelete()
                            // 把老的Text删除
                            textDelete()
                            // 把老的date删除
                            dateDelete()
                            // 创建date,strut,array类新标签
                            newDate(String(mtypeX))
                        }
                        deleteAddAction('myModal', i)
                    } else {
                        // 如果是删除返回来的
                        var product_fun = response.form_fun;
                        // 显示功能定义表格
                        funTable('myTable tbody', product_fun)
                    }
                }
            })
            break;
        }
    }
}

// mymo是哪个modal要显示：像'myModal'等， med是哪个id要被关联后边删除用到，mts是提示信息
function deleteAddAction(mymo, med, mts = '') {
    if (mts !== '') {
        // 获取div元素，作为提示框显示提示信息用
        var div = document.getElementById('mySmallModalDiv');
        // 给div传值并显示div.innerHTML = '请注意, 前面有必填项没填！';// 或者使用
        div.textContent = mts;  // 这个直接渲染文本，不带样式，安全一点
    }
    // 赋值给以后调用确认是哪里调用的模态框
    $('#hideinput').val(med)
    $('#' + mymo).modal('show');
    // 显示功能定义1-3数据类型数据
    {#typeShow()#}
    MED = med
    // 定时关闭小模态框(消息提示)
    if (mymo === 'mySmallModal') {
        setTimeout(function () {
            $('#' + mymo).modal('hide');
        }, 3000)
    }
}

// 向后端发送请求 DELETE_ID -> 删除  MED === 0或者1都是删除全部
function confirmDelete() {
    select_list = ['mySelectPlat', 'mySelectPlat', 'mySelectExample', 'mySelectProduct', 'mySelectDevice']
    selectedIndex = document.getElementById(select_list[MED]).selectedIndex
    DELETE_IDA = document.getElementById(select_list[MED]).options[selectedIndex].value
    DELETE_setupA = select_list[MED].replace('mySelect', '')   //因为只要删这张表的记录，后边几张表是关联的，都会同时被删去
    if (DELETE_IDA != 0) {  // 删除记录id为0 ，则不请求
        $.ajax({
            url: "/setup/delete",
            type: "GET",
            data: {aid: DELETE_IDA, setup: DELETE_setupA},
            dataType: "JSON",  //加上这个，表示接受来的时JSON格式
            success: function (res) {
                // ｛status:true｝ 就会自动转换成js需要的->对象，就可：res.xxx取值了
                if (res.status) {
                    //删除成功,刷新页面
                    location.reload()
                } else {
                    alert(res.error);
                }
                console.log("请求返回值", res);
            }
        })
    } else {
        $('#deleteModal').modal('hide');  // 隐藏提示框
    }
}

function canceDelete(med) {
    // DELETE_ID = 0;
    $('#'+med).modal('hide');
}

</script>
<script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
{% endblock %}
